<template>
  <!--    同步-->
  <div class="synchroization">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      @closeDialog="closeDialog"
    >
      <div class="targetName">目标名称 : {{ targetDataName }}</div>
      <el-form label-width="1.2rem">
        <!-- <el-form-item label="目标名称:">
          
        </el-form-item> -->
        <el-radio-group v-model="radio">
          <el-radio label="1">共享到海军侦察情报综合数据库</el-radio>
          <el-radio label="2">共享到数据管理分系统</el-radio>
        </el-radio-group>
        <el-form-item label="文件类型:" v-if="radio === '1'">
          <el-select v-model="picType" placeholder="请选择文件类型">
            <el-option
              v-for="(item, index) in picTypeList"
              :label="item.mc"
              :value="item.xh"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="footer flex-center">
        <div class="cancel" @click="dialogVisible = false">取消</div>
        <div class="confirm" @click="submit">同步</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      title: "同步",
      dialogVisible: false, //模态框的显示与隐藏
      radio: "1", //单选
      picType: "",
      picTypeList: [],
      targetDataName: "",
      clickItemId: "",
    };
  },
  mounted() {},
  methods: {
    // 媒体类型接口
    getAllMTLX(id, dataTypeTabsId) {
      this.$api
        .getAllMTLX({
          dataId: id,
          flag: dataTypeTabsId,
        })
        .then((data) => {
          console.log(88888, data);
          if (data.code == 200) {
            this.dialogVisible = true;
            this.picTypeList = data.data.list;
            this.targetDataName = data.data.targetName;
          } else {
            this.$message({
              type: "warning",
              message: data.msg,
              showClose: true
            });
          }
        });
    },

    submit() {
      let params = {};
      if (this.radio == "1") {
        params = {
          dataId: this.clickItemId,
          mtlxId: this.picType,
          flag: this.dataTypeTabsId,
        };
      } else if (this.radio == "2") {
        params = {
          dataId: this.clickItemId,
          flag: this.dataTypeTabsId,
        };
      }
      if (this.picType === "" && this.radio == "1") {
        this.$message({
          type: "warning",
          message: "请选择文件类型",
          showClose: true
        });
        return;
      }
      this.$api.synData(params).then((res) => {
        if (res.code == "200") {
          console.log(112, res, this.clickItemId);
          this.dialogVisible = false;
          this.$message({
            type: "success",
            message: `${res.msg}`,
            showClose: true
          });
        } else {
          this.$message({
            type: "warning",
            message: `${res.msg}`,
            showClose: true
          });
        }
      });
    },
    cancel() {
      this.dialogVisible = false;
    },
    closeDialog() {
      this.$emit("closeDialog", this.dialogVisible);
    },
    openDialog(id, dataTypeTabsId) {
      this.clickItemId = id;
      this.dataTypeTabsId = dataTypeTabsId;
      this.getAllMTLX(id, dataTypeTabsId);
    },
  },
};
</script>

<style lang="scss" scoped>
.synchroization {
  ::v-deep .el-dialog {
    position: relative;
    width: 8.2rem !important;
    // 目标
    .targetName {
      margin-left: -0.7rem;
      margin-top: -0.1rem;
      margin-bottom: 0.2rem;
    }
    .el-dialog__body {
      padding: 0.3rem 1rem;
      background: #0f2d43;
      color: #ffffff;
      height: 3.6rem !important;
    }
    .el-radio__label {
      color: #ffffff;
    }
    // .el-radio__label:hover {
    //   color: #1682e6;
    // }
    .el-radio__input.is-checked + .el-radio__label {
      color: #1682e6;
    }
    .el-dialog__footer {
      background: #0f2d43;
      padding: 0.4rem 1rem;
      color: #ffffff;
    }
    .el-radio-group {
      margin-left: 1rem;
    }
    .el-dialog__header {
      background: #143853;
      & span {
        color: #ffffff;
      }
    }
    .el-form-item {
      margin: 0.4rem 0 0.8rem;
    }
    .el-form-item__label {
      color: #ffffff;
    }
    .el-input__inner {
      width: 4rem;
      background: #0355a4;
      color: #ffffff !important;
      border: none;
    }
    .el-select {
      background: #0355a4;
    }
    .el-popper {
      background: #0355a4 !important;
    }
    .footer {
      margin-top: 0.3rem;
      color: #ffffff;
      position: absolute;
      bottom: 0.3rem;
      left: 2.2rem;
      margin-right: 0.3rem;
      justify-content: flex-end;
      .cancel {
        text-align: center;
        width: 1.2rem;
        height: 0.38rem;
        line-height: 0.38rem;
        background: #62656c;
        border-radius: 0.05rem;
      }
      .confirm {
        margin-left: 0.6rem;
        text-align: center;
        width: 1.2rem;
        height: 0.38rem;
        line-height: 0.38rem;
        background: #1890ff;
        border-radius: 0.05rem;
      }
    }
  }
}
</style>